<!-- 门店列表 -->
<template>
  <div class="app-container">
    <el-form :inline="true" :model="formData" size="small" class="form-inline">
      <el-form-item>
        <el-input
          v-model="formData.name"
          clearable
          placeholder="门店名称"
          @clear="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formData.relationPhone"
          clearable
          placeholder="手机号"
          @clear="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.mainType" placeholder="主营类目">
          <el-option label="全部" :value="null"></el-option>
          <el-option label="女装" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.status" placeholder="是否启用">
          <el-option label="停用" :value="0"></el-option>
          <el-option label="启用" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button plain icon="el-icon-refresh-right" @click="reset">重置</el-button>
        <el-button plain icon="el-icon-plus" @click="handleCreate">新增门店</el-button>
        <el-button plain icon="el-icon-plus" @click="exportData">导出数据</el-button>
      </el-form-item>
    </el-form>
    <public-table :table-head="tableHead" :table-data="tableData" :show-index="false" :show-select="true" @handle-selection="handleSelection">
      <template slot="status" slot-scope="slotProps">
          <el-switch
            v-model="slotProps.data.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(slotProps.data)"
          ></el-switch>
        </template>
      <template slot="handle" slot-scope="slotProps">
        <el-button type="text" @click="handleInfo(slotProps.data)">详情</el-button>
        <el-button type="text" @click="handleEdit(slotProps.data)">修改</el-button>
        <el-button type="text" @click="handleCheck(slotProps.data)">绑定云镜</el-button>
      </template>
    </public-table>
    <Pagination
      ref="myPagination"
      :sum-total="sumTotal"
      @handle-size="handlePageSize"
      @handle-current="handlePageCurrent"
    />

    <public-dialog
      :title="'云镜绑定'"
      :visible="filterView"
      :custom-class="'filter-view'"
      @handle-cancel="handleCancel"
      @after-close="afterClosed"
    >
      <el-form ref="filterForm" :inline="true" :model="filterForm" size="small" label-width="100px">
        <el-form-item label="已绑定云镜：" prop="keyWord">
        </el-form-item>
        <br/>
        <div v-if="optionList[0] !== null">
          <el-form-item v-for="(item, index) in optionList" :key="index" :label="'设备'+index+':'" prop="creatorName">
            <el-input :disabled="true" v-model="optionList[index]" :value="item" style="width:210px" placeholder="设备编号"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="添加设备:" prop="creatorName">
          <el-input v-model="addFilterForm" style="width:210px;" placeholder="设备编号"></el-input>
          <el-button @click="addResetForm" style="border:0;color:#1890FF;">添加</el-button>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button size="small" @click="handleReset">取消</el-button>
        <el-button type="primary" size="small" @click="handleSearch">确定</el-button>
      </template>
    </public-dialog>
  </div>
</template>

<script>
import fileDownload from 'js-file-download'
import PublicTable from '@/components/Tables/PublicTable'
import Pagination from '@/components/Pagination'
import PublicDialog from '@/components/Dialog/PublicDialog'
import { Basic } from '@/api/base'
import { getToken } from '@/utils/auth'

export default {
  components: { fileDownload,PublicTable, Pagination, PublicDialog },

  data() {
    return {
      tableHead: [
        { label: '门店名称', value: 'name' },
        { label: '所在省份', value: 'provinceName' },
        { label: '所在城市', value: 'cityName' },
        { label: '联系人', value: 'relation' },
        { label: '手机号', value: 'relationPhone' },
        { label: '主营类目', value: 'mainType' },
        { label: '创建时间', value: 'createTime' },
        { label: '已绑定云镜书', value: 'mirrorCount',width: 150 },
        { label: '创建人', value: 'creatorName' },
        { label: '启用', type: 'slot', slotName: 'status' },
        { label: '操作', type: 'slot', slotName: 'handle', width: 250 }
      ],
      tableData: [],
      optionList: [],
      addFilterForm: '',
      formData: {},
      selectList:[],
      // 分页
      sumTotal: 0,
      currentPage: 1,
      pageSize: 10,
      showAdd: false,
      showApprove: false,
      filterView: false,
      supplierId1: null,
      supplierId2: null,
      cloudMirrorId:'',
      showType: 1,
      filterForm: {
        keyWord: '',
        creatorName: '',
        dateRange: [],
        startTime: '',
        endTime: '',
        status: null
      },
      searchData: {}
    }
  },

  computed: {},

  mounted() {
    this.getTableData()
  },

  methods: {
    // 查询
    handleQuery() {
      const vm = this
      vm.currentPage = 1
      vm.$refs.myPagination.currentPage = 1
      const params = {
        name: vm.formData.name || null,
        keyWord: vm.formData.relationPhone,
        mainType: vm.formData.mainType,
        status: vm.formData.status
      }
      vm.searchData = params
      vm.getTableData()
    },
    // 获取列表数据
    getTableData() {
      const vm = this
      const params = JSON.parse(JSON.stringify(vm.searchData))
      params.pageNum = vm.currentPage
      params.pageSize = vm.pageSize
      Basic.general('shop/list', params).then(res => {
        const { data } = res
        const { total = 0, records = [] } = data
        vm.sumTotal = total
        const arr = records.map(t => {
          t.statusName = t.status === 1 ? '审核通过' : '待审核'
          return t
        })
        vm.tableData = arr
      })
    },
    // 重置
    reset() {
      const vm = this
      vm.formData.name = ''
      vm.formData.relationPhone = ''
      vm.formData.status = null
      vm.formData.mainType = null
      vm.searchData.pageNum = 1
      vm.searchData = JSON.parse(JSON.stringify(vm.formData))
      vm.$nextTick(_ => {
        vm.getTableData()
      })
    },
    // 新增
    handleCreate() {
      this.$router.push({
        path: 'storemanagement-add',
      })
    },
    // 修改
    handleEdit(data) {
      this.$router.push({
        path: 'storemanagement-add',
        query:{
          id:data.id
        }
      })
    },
    // 绑定云镜
    handleCheck(data) {
      this.filterView = true
      this.cloudMirrorId = data.id
      const params = {
        id: data.id
      }
      const vms = this
      Basic.normal('shop/getMirrorsByShopId',params).then( res => {
        vms.optionList = res.data
      })
    },
    afterClosed() {
      this.filterView = false
    },
    handleCancel() {
      this.filterView = false
    },
    handleReset() {
      this.filterView = false
    },
    handleSearch() {
      const params = {
        id:this.cloudMirrorId,
        mirrorNos:[]
      }
      params.mirrorNos = [...new Set(this.optionList)]
      Basic.normal('shop/bindingMirror',params).then(res => {
        if(res.code == 200) { 
          this.filterView = false
          this.addFilterForm = ''
        }
      })
    },
    addResetForm() {
      this.optionList.push(this.addFilterForm)
    },
    // 查看详情
    handleInfo(data) {
      this.$router.push({
        path:'storemanagement-detail',
        query:{
          id:data.id
        }
      })
    },
    // 启用
    handleStatusChange(data) {
      console.log(data.id)
      const params = {
        id: data.id
      }
      Basic.normal('shop/enabledByShopId',params).then(res =>{})
    },
    // 导出
    // 多选数组
    handleSelection(e) {
      this.selectList = e
      console.log(e)
    },
    exportData() {
      const vm = this
      let shopId = []
      if( this.selectList.length ){
        this.selectList.forEach(element => {
          shopId.push(element.id)
        });
      }
      const params = this.selectList.length ? {
        keyWord:vm.formData.relationPhone,
        name:vm.formData.name,
        mainType:vm.formData.mainType,
        status:vm.formData.status,
        shopIds:shopId
      } : {
        keyWord:vm.formData.relationPhone,
        name:vm.formData.name,
        mainType:vm.formData.mainType,
        status:vm.formData.status,
      }
      let rs = {
        headers: {
            Authorization: getToken()
          },
          responseType: 'blob',
          params
      }
      // vm.$axios.get(`${process.env.VUE_APP_BASE_API}/shop/exportShop`,rs).then(res => {
      vm.$axios.get(`http://192.168.1.41:7005/shop/exportShop`,rs).then(res => {
        fileDownload(res.data, '门店列表.xlsx')
      }).catch(err => {
          const { response } = err
          if (response.status && response.status === 401) {
            vm.$message.error('暂无操作权限，请联系管理员！')
          }
        })
    },
    // 分页
    handlePageSize(val) {
      this.pageSize = val
      this.getTableData()
    },
    handlePageCurrent(val) {
      this.currentPage = val
      this.getTableData()
    }
  }
}
</script>
<style lang='scss' scoped>
.app-container /deep/ .filter-view {
  width: 710px;
}
</style>
